<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="14">
				<el-button type="primary" @click="openCourse(null)" >添加课程</el-button>
				<el-table :data="courses" border highlight-current-row style="width: 100%">
					<el-table-column prop="courseTypeId" label="分类">
					</el-table-column>
					<el-table-column prop="courseTitle" label="名称">
					</el-table-column>
					<el-table-column prop="courseTerm" label="学期">
					</el-table-column>
					<el-table-column prop="courseCredit" label="学分">
					</el-table-column>
					<el-table-column prop="courseTeacher" label="授课教师">
					</el-table-column>
					<el-table-column prop="courseDesc" label="描述">
					</el-table-column>
					<el-table-column prop="courseTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showTarget(scope.row)" type="text" size="small">查看目标</el-button>
					        <el-button @click="openCourse(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delCourse(scope.row.courseId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="10">
				<el-button type="primary" @click="openTarget(null)" >添加目标</el-button>
				<el-table :data="targets" border highlight-current-row style="width: 100%">
					<el-table-column prop="targetTitle" label="标题">
					</el-table-column>
					<el-table-column prop="targetScore" label="分数">
					</el-table-column>
					<el-table-column prop="targetWeight" label="权重">
					</el-table-column>
					<el-table-column prop="targetTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="120px">
						<template slot-scope="scope">
					        <el-button @click="openTarget(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delTarget(scope.row.targetId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog
		  title="课程设置"
		  :visible.sync="courseForm.visible"
		  width="30%">
		  <el-form :model="courseForm" :rules="courseRules" ref="courseForm" label-width="100px">
			  <el-form-item label="分类" prop="courseTypeId">
			    <el-input v-model="courseForm.courseTypeId"></el-input>
			  </el-form-item>
			  <el-form-item label="名称" prop="courseTitle">
			    <el-input v-model="courseForm.courseTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="学期" prop="courseTerm">
			    <el-input v-model="courseForm.courseTerm"></el-input>
			  </el-form-item>
			  <el-form-item label="学分" prop="courseCredit">
			    <el-input v-model="courseForm.courseCredit"></el-input>
			  </el-form-item>
			  <el-form-item label="授课教师" prop="courseTeacher">
			    <el-input v-model="courseForm.courseTeacher"></el-input>
			  </el-form-item>
			  <el-form-item label="描述" prop="courseDesc">
			    <el-input v-model="courseForm.courseDesc"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeCourse">取 消</el-button>
		    <el-button type="primary" @click="saveCourse">保 存</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="目标设置"
		  :visible.sync="targetForm.visible"
		  width="30%">
		  <el-form :model="targetForm" :rules="targetRules" ref="targetForm" label-width="100px">
			  <el-form-item label="所属课程">
			    {{selectCourse?.courseTitle}}
			  </el-form-item>
			  <el-form-item label="标题" prop="targetTitle">
			    <el-input v-model="targetForm.targetTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="分数" prop="targetScore">
			    <el-input v-model="targetForm.targetScore"></el-input>
			  </el-form-item>
			  <el-form-item label="权重" prop="targetWeight">
			    <el-input v-model="targetForm.targetWeight">
					<template slot="append">%</template>
				</el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeTarget">取 消</el-button>
		    <el-button type="primary" @click="saveTarget">保 存</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		courses: [], 
		targets: [],
		selectCourse: null,
		courseForm:{
			visible: false,
			courseId: '',
			courseTypeId: '',
			courseTitle: '',
			courseTerm: '',
			courseCredit: '',
			courseTeacher: '',
			courseDesc: ''
		},
		courseRules: {
          courseTypeId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          courseTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          courseTerm: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          courseCredit: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          courseTeacher: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          courseDesc: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
        },
		targetForm:{
			visible: false,
			targetId: '',  
			targetCourseId: '',  
			targetTitle: '',  
			targetScore: '', 
			targetWeight: ''
		},
		targetRules: {
          targetCourseId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          targetTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          targetScore: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          targetWeight: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ]
        },
	}
	let vueMethods = {
		getCourses() {
			let that = this
			postRequst('/admin/getCourses', that.query).then(function (resp) {
				that.courses = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectCourse = resp.rows[0]
					//that.targetForm.targetCourseId = resp.rows[0].courseId
					that.getTargets()
				}
			})
		},
		getTargets() {
			let that = this
			postRequst('/admin/getTargets', {courseId: that.selectCourse.courseId}, true).then(function (resp) {
				that.targets = resp.rows
			})
		},
		showTarget(row){
			let that = this
			that.selectCourse = row
			that.getTargets()
		},
		openCourse(row){
			let that = this
			if(row){
				that.courseForm.courseId = row.courseId
				that.courseForm.courseTypeId = row.courseTypeId
				that.courseForm.courseTitle = row.courseTitle
				that.courseForm.courseTerm = row.courseTerm
				that.courseForm.courseCredit = row.courseCredit
				that.courseForm.courseTeacher = row.courseTeacher
				that.courseForm.courseDesc = row.courseDesc
			}else{
				that.courseForm.courseId = ''
				that.courseForm.courseTypeId = ''
				that.courseForm.courseTitle = ''
				that.courseForm.courseTerm = ''
				that.courseForm.courseCredit = ''
				that.courseForm.courseTeacher = ''
				that.courseForm.courseDesc = ''
			}
			that.courseForm.visible = true
		},
		closeCourse() {
			this.$refs['courseForm'].resetFields();
			this.courseForm.visible = false
		},
		openTarget(row){
			let that = this
			if(!that.selectCourse){
				that.$message({message: '请先选择课程', type: "warning"});
				return ;
			}
			if(row){
				that.targetForm.targetId = row.targetId
				that.targetForm.targetCourseId = row.targetCourseId
				that.targetForm.targetTitle = row.targetTitle
				that.targetForm.targetScore = row.targetScore
				that.targetForm.targetWeight = row.targetWeight
			}else{
				that.targetForm.targetId = ''
				that.targetForm.targetCourseId = that.selectCourse.courseId
				that.targetForm.targetTitle = ''
				that.targetForm.targetScore = ''
				that.targetForm.targetWeight = ''
			}
			that.targetForm.visible = true
			
		},
		closeTarget() {
			this.$refs['targetForm'].resetFields();
			this.targetForm.visible = false
		},
		saveCourse() {
			let that = this
			this.$refs['courseForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveCourse', that.courseForm).then(function (resp) {
						if(resp.status == 0){
							that.getCourses()
							that.courseForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		saveTarget() {
			let that = this
			this.$refs['targetForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveTarget', that.targetForm).then(function (resp) {
						if(resp.status == 0){
							that.getTargets()
							that.targetForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delCourse(courseId) {
			let that = this
			postRequst('/admin/delCourse', {courseId: courseId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getCourses()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		delTarget(targetId) {
			let that = this
			postRequst('/admin/delTarget', {targetId: targetId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getTargets()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		}
	}
	function vueCreated() {
		let that = this
		that.getCourses()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>